<template>
  <Common>
    <template v-slot:top>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        size="medium "
      >
        <el-form-item label="用户名:">
          <el-input
            v-model="form.userName"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="产生时间:">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="selectData"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
          <el-button
            type="warning"
            icon="el-icon-download"
            v-disable-click="3"
            @click="deport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:table>
      <el-table
        :data="tableData"
        v-loading="loading"
        height="90%"
        border
        style="width: 100%"
      >
        <el-table-column prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="url" label="路径" width="240"> </el-table-column>
        <el-table-column prop="logText" label="异常描述"> </el-table-column>
        <el-table-column prop="createTime" label="产生时间" width="200">
        </el-table-column>
      </el-table>
    </template>
    <template v-slot:pagination>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </Common>
</template>

<script>
import Common from "@/components/common.vue";
import { getSysLog } from "@/common/api";
import { formatISODate } from "@/untils/trans";
export default {
  name: "SysLog",
  props: {},
  components: { Common },
  computed: {},
  data() {
    return {
      form: {
        userName: "",
      },
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      time: [],
    };
  },
  mounted() {},
  created() {
    this.getTable();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getTable();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTable();
    },

    selectData() {
      this.pageNum = 1;
      this.getTable();
    },
    getTable() {
      let param = {
        ...this.form,
        startTime: this.time[0] ? formatISODate(this.time[0]) : "",
        endTime: this.time[1] ? formatISODate(this.time[1]) : "",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.loading = true;
      getSysLog(param)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.tableData.forEach((i, index) => {
              i.index = (this.pageNum - 1) * this.pageSize + index + 1;
            });
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    deport() {
      const { userName } = this.form;
      let startTime = this.time[0] ? formatISODate(this.time[0]) : "";
      let endTime = this.time[1] ? formatISODate(this.time[1]) : "";
      let str = `userName=${userName}&startTime=${startTime}&endTime=${endTime}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`;
      if (process.env.NODE_ENV == "development") {
        window.location.href = `http://192.168.10.87:8077/api/exceptionLog/export?${str}`;
      } else {
        const host = window.location.protocol + "//" + window.location.host;
        window.location.href = `${host}/api/exceptionLog/export?${str}`;
      }
    },
    reset() {
      this.form = {
        userName: "",
      };
      this.time = [];
    },
  },
};
</script>


<style lang="scss" scoped>
</style>